import styles from "@/layout/Graphics/Graphics.module.scss";
import React, { useEffect, useState } from "react";
import { Button, Checkbox, Drawer } from "antd";
import {
  GraphicsGroup,
  graphicsGroupArr,
  GraphicsGroupItem,
} from "@/config/graphicsGroup.ts";
import BuiltCom from "@/components/Graphics/components/BuiltCom.tsx";
import JsCom from "@/components/Graphics/components/JsCom.tsx";
import SvgCom from "@/components/Graphics/components/SvgCom.tsx";
import IconFontCom from "@/components/Graphics/components/IconFontCom.tsx";
import { CheckboxChangeEvent } from "antd/es/checkbox";
import { deepClone } from "@meta2d/core";
import axios from "@/utils/request.ts";
interface Props {
  searchQuery: string;
}
const STATIC_URL = import.meta.env.VITE_APP_STATIC_URL;
function SystemComponents(props: Props) {
  const [open, setOpen] = useState(false);
  const [countMap, setCountMap] = useState<{ [key: string]: number }>({});
  const [graphicsGroup, setGraphicsGroup] =
    useState<GraphicsGroupItem[]>(graphicsGroupArr);
  const onChange = (e: CheckboxChangeEvent, key: string) => {
    let newList = deepClone(graphicsGroup);
    let d = newList.find((v) => v.key == key);
    if (d) {
      d.show = e.target.checked;
    }
    setGraphicsGroup(() => newList);
    localStorage.setItem("graphicsGroupArr", JSON.stringify(newList));
  };
  const handleShowAll = (setStorage: boolean) => {
    let newList = deepClone(graphicsGroupArr);
    newList.forEach((v) => {
      v.show = true;
    });
    setGraphicsGroup(() => newList);
    setStorage &&
      localStorage.setItem("graphicsGroupArr", JSON.stringify(newList));
  };
  useEffect(() => {
    if (props.searchQuery.trim().length > 0) {
      let newList = deepClone(graphicsGroupArr);
      newList.forEach((v) => {
        v.show = v.key.includes(props.searchQuery);
      });
      setGraphicsGroup(() => newList);
    } else {
      let newList = deepClone(graphicsGroupArr);
      setGraphicsGroup(() => newList);
    }
    axios.get(STATIC_URL + "/static/count.json").then((r) => {
      setCountMap(() => r.data);
    });
  }, [props.searchQuery]);
  return (
    <div className={styles.SystemComponents}>
      <div className="main">
        {graphicsGroup.map((item, index) => {
          if (item.type == GraphicsGroup.built && item.show) {
            return <BuiltCom item={item} key={"BuiltCom" + index}></BuiltCom>;
          }
          if (item.type == GraphicsGroup.js && item.show) {
            return <JsCom item={item} key={"JsCom" + index}></JsCom>;
          }
          if (item.type == GraphicsGroup.svg && item.show) {
            return (
              <SvgCom
                countMap={countMap}
                item={item}
                key={"SvgCom" + index}
              ></SvgCom>
            );
          }
          if (item.type == GraphicsGroup.iconfont && item.show) {
            return (
              <IconFontCom item={item} key={"iconfont" + index}></IconFontCom>
            );
          }
        })}
      </div>
      <div className={styles.LibraryManagement}>
        <Drawer
          title="图形"
          placement={"left"}
          width={220}
          onClose={() => {
            setOpen(false);
          }}
          open={open}
          extra={
            <Button
              size={"small"}
              type="primary"
              onClick={() => handleShowAll(true)}
            >
              显示全部
            </Button>
          }
        >
          {graphicsGroup.map((item, index) => {
            return (
              <div key={"checkbox" + index} style={{ marginBottom: 10 }}>
                <Checkbox
                  checked={item.show}
                  onChange={(e) => onChange(e, item.key)}
                >
                  <div
                    title={item.key}
                    style={{
                      whiteSpace: "nowrap",
                      width: 150,
                      textOverflow: "ellipsis",
                      overflow: "hidden",
                    }}
                  >
                    {item.key}
                  </div>
                </Checkbox>
              </div>
            );
          })}
        </Drawer>
        <Button
          block
          onClick={() => {
            setOpen(true);
          }}
        >
          图形库管理
        </Button>
      </div>
    </div>
  );
}

export default React.memo(SystemComponents);
